import React, { Suspense } from "react";
import { Card, Tabs, Tooltip } from "antd";
import { connect } from "dva";
import RobotSetUp from "@/pages/Account/robotSetup/index";
import BackRouter from "./backRouter";
import AccessSettings from "@/pages/Account/accessSettings/index";
import KnowledgeConfiguration from "./KnowledgeConfiguration";
import HotConfiguration from "./hotSpots";
import QuickEntry from "./quickEntry";
import BottomLabel from "./bottomLabel";
import TicketConfiguration from "./ticketConfiguration/index";
import ChannnelSettingMenu from "./channelSetting/menu";
import styles from "./robotEdit.less";
import BasicSetting from "./basicSetting";
import InlineSetting from "./inlineSetting";
import RobotSetting from "./robotSetting/index";
import Transfer from "./transfer";
import TerminalList from "./terminalList";
import ModelList from "@/pages/LargeModelCenter/LanguageModel/InRobot/list";
import UserSession from "@/UserSession";
import { formatMessage } from 'umi-plugin-react/locale';


const { TabPane } = Tabs;

class RobotEdit extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			type: "1",
			channel: "web",
		};
	}

	componentDidMount() {
		const { dispatch } = this.props;

		dispatch({
			type: "global/changeLayoutCollapsed",
			payload: true,
		});
	}

	changeTab = (key) => {
		this.setState({ type: key }, () => {
			switch (key) {
				case "4":
					this.KnowledgeConfiguration.getKnowledgeList();
					break;
				case "8":
					this.TicketConfiguration.getTicketList()
					break;
				case "9":
					this.TerminalList.getList();
					break;
				case "10":
					this.ModelList.getList();
					break;
			}
		});
	};

	handleClick = (e) => {
		this.setState({ channel: e.key });
	};

	renderMenuText = (title) => {
		return <div style={{ width: 200, textAlign: "left" }}>{title}</div>;
	};

	render() {
		const { query } = this.props.location;
		const { type, channel } = this.state;
		const { match: { params: { id } }, location: { query: { platform, applicationId, isllmCustom, loginType } } } = this.props;

		return (
			<Card className={styles.editCard} bordered={false} style={{ height: '100%' }} bodyStyle={{ height: '100%' }}>
				{
					type != 10 ? (
						<div style={{ position: "absolute", right: 20, top: 16, zIndex: 2 }}>
							<BackRouter pathname='/digitalEmployees'></BackRouter>
						</div>
					) : ''
				}

				<Tabs activeKey={type} className={styles.robotSetMenu} onChange={this.changeTab} tabPosition={"left"} style={{ height: '100%' }} tabBarStyle={{ width: 170 }}>
					<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.applicationSetting' }))} disabled key='0'></TabPane>
					<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.basicSetting' }))} key='1'>
						<div className={styles.title}>
							<span>{formatMessage({ id: 'robotEdit.basicSetting' })}</span>
						</div>
						<BasicSetting robotId={id} channel={platform} applicationId={applicationId} />
					</TabPane>
					<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.knowledgeSetting' }))} key='4'>
						<div className={styles.title}>
							<span>{formatMessage({ id: 'robotEdit.knowledgeSetting' })}</span>
						</div>
						<KnowledgeConfiguration
							robotId={id}
							onRef={(ref) => (this.KnowledgeConfiguration = ref)}
							applicationId={applicationId}
						/>
					</TabPane>
					{
						platform != 'DIGITAL_SCREEN' ? (
							<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.inlineSetting' }))} key="01">
								<div className={styles.title}>
									<span>{formatMessage({ id: 'robotEdit.inlineSetting' })}</span>
								</div>
								<InlineSetting channel={platform} isllmCustom={'1'} applicationId={applicationId} loginType={loginType} />
							</TabPane>
						) : null
					}

					<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.robotSetting' }))} key="02">
						<div className={styles.title}>
							<span>{formatMessage({ id: 'robotEdit.robotSetting' })}</span>
						</div>
						<RobotSetting robotId={id} channel={platform} applicationId={applicationId} />
					</TabPane>
					{
						platform == 'DIGITAL_SCREEN' ? (
							<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.terminalManagement' }))} key='9'>
								<div className={styles.title}>
									<span>{formatMessage({ id: 'robotEdit.terminalManagement' })}</span>
								</div>
								<TerminalList robotId={id} applicationId={applicationId} onRef={ref => this.TerminalList = ref} />
							</TabPane>
						) : null
					}
					{
						UserSession.hasLargeLanguage() ? (
							<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.modelConfiguration' }))} key='10'>
								<ModelList applicationId={applicationId} onRef={ref => this.ModelList = ref} />
							</TabPane>
						) : null
					}
				</Tabs>
			</Card>
		);
	}
}

export default connect()(RobotEdit);
